<template>
	<div class="container">
		<tabBar currentPage="/pages/index/sameCity"></tabBar>
		<div class="head" :style="'padding-top: ' + statusBarHeight + 'px;'">
			<div class="warp">
				<div class="nav-tab">
					<div v-for="(item,index) in tabList" :key="index" :class="['nav-item',current == index?'active':'']"
						@click="select(index)">{{item.name}}</div>
				</div>
			</div>
		</div>
		<div class="content" :style="'padding-top: ' + (navigationBarHeight) + 'px;'">
			<div class="list">
				<div class="item" v-for="(item,index) in list" :key="index">
					<div class="carousel">
						<div v-if="item.filesList.length>0">
							<image
								v-if="item.filesList[0].fileSuffix !== 'png' && item.filesList[0].fileSuffix !== 'jpg' && item.filesList[0].fileSuffix !== 'jpge'"
								style="width: 100%;opacity: 0;" :src="item.filesList[0].coverPath" class="loaded"
								mode="widthFix" />
							<image v-else :src="item.filesList[0].filePath" style="width: 100%;opacity: 0;"
								class="loaded" mode="widthFix" />
						</div>
						<swiper :indicator-dots="true" circular='true' duration="400" indicator-active-color="#FB8E26"
							indicator-color="#cccccc">
							<swiper-item class="swiper-item" v-for="(itemChild,indexChild) in item.filesList"
								:key="indexChild">
								<div class="image-wrapper">
									<!-- <image :src="itemChild.filePath" class="loaded" mode="aspectFill"
										@click="previewImage(itemChild.filePath,0)"></image> -->
									<image
										v-if="itemChild.fileSuffix !== 'png' && itemChild.fileSuffix !== 'jpg' && itemChild.fileSuffix !== 'jpge'"
										:src="itemChild.coverPath" class="loaded" mode="widthFix" />
									<image v-else :src="itemChild.filePath" class="loaded" mode="widthFix" />
								</div>
							</swiper-item>
						</swiper>
					</div>
					<div class="card-footer" @click="$navSkin.toProduct(item.id)">
						<div class="pri-row">
							<div class="pri-left">
								<span v-if="item.price" class="price">
									<span class="price-icon">￥</span>{{item.price}}
								</span>
								<span class="attr" v-if="item.freeShipping">包邮</span>
							</div>
							<div class="pri-right">
								<div class="pri-right-item" @click.stop="changeFavoriteInformation(item,item.id)">
									<image v-if="!item.favorite" src="/static/icons/like_off.png" mode="aspectFit">
									</image>
									<image v-else src="/static/icons/like_on.png" mode="aspectFit"
										@click.stop="changeFavoriteInformation(item,item.id)"></image>
									<span>{{item.favoriteCount}}</span>
								</div>
								<div class="pri-right-item" @click.stop="changeCollectInformation(item,item.id)">
									<image v-if="!item.collect" src="/static/icons/collect_off.png" mode="aspectFit">
									</image>
									<image v-else src="/static/icons/collect_on.png" mode="aspectFit"
										@click.stop="changeCollectInformation(item,item.id)"></image>
									<span>{{item.collectCount}}</span>
								</div>
								<div class="pri-right-item">
									<image src="/static/icons/news_off.png" mode="aspectFit"></image>
									<span>0</span>
								</div>
							</div>
						</div>
						<div class="desc">
							{{item.title}}
						</div>
						<div class="user">
							<div class="user-left" @click.stop="$navSkin.toPersonel(item.userId)">
								<image class="user-icon" :src="item.avatar" mode=""></image>
								<span class="user-name">{{item.nickname}}</span>
								<span
									class="time">{{ item.createTime? $utils.timestampFormat(Date.parse( item.createTime)/1000) : ''}}</span>
							</div>
							<image class="user-right" src="/static/icons/user-more.png" mode=""></image>
						</div>
					</div>

				</div>
			</div>
			<div class="empty" v-show="list.length<1">
				<image class="empty-img" src="../../static/icon/icon_wu.png" mode=""></image>
				<div class="title">暂无内容，快去发布新的内容吧！</div>
			</div>
		</div>

	</div>
</template>

<script>
	import data from '@/js/index/sameCity/data.js';
	import methods from '@/js/index/sameCity/methods.js';
	import {
		mapState
	} from 'vuex';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	export default {
		data,
		methods,
		onLoad(e) {
			this.getPageList()
		},
		onShow() {
			// setTimeout(()=>{
			// 	this.$refs.popup.open()
			// },1000)
		},
		onReachBottom() {
			if (this.tabList.length > 0) {
				this.getChannelList();
			}

		},
		onHide() {
			console.log('on hide')
		},
		onUnload() {},
		computed: {
			...mapState(['navigationBarHeight', 'userInfo', 'statusBarHeight']),
			bgHeight() {
				// #ifdef APP-PLUS
				return 250
				// #endif
				return this.navigationBarHeight + uni.upx2px(364);
			}
		},
		components: {
			uniPopup,
		}
	};
</script>
<style>
	page {
		background-Color: #FFFFFF;
	}
</style>
<style scoped lang="scss">
	@import '~@/style/index/sameCity.scss';
</style>